<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title></title>
        <script type="text/javascript" src="../js/jquery.js"></script>
		
    </head>
    <style type="text/css">
        .line{
            width:100px;
            height:20px;
            background: blanchedalmond;
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
        }
		.ab{
            width: 250px;
			
		}
        .block{
			/* width: 80%; */
            background: greenyellow;
			
        }
    </style>
    <body>
        <section class="line">
            boom clap you can you up!come on!
        </section>
		<div class="ab">
			<section class="block">
				the day you went the way .l lose my life!call me cray call me back,call sofarling the day you went the day
				the day you went the way .l lose my life!call me cray call me back,call sofarling the day you went the day
			</section>
		</div>
		
		
	<div class="common">
		<h2>example</h2>
		<div class = "demo">
			<div class="text" id="overflowhidden">吉日兮辰良，穆将愉兮上皇；抚长剑兮玉珥[ěr]，璆[qiú]锵鸣兮琳琅；瑶席兮玉瑱[zhèn]，盍[hé]将把兮琼芳；蕙肴蒸兮兰藉，奠桂酒兮椒浆；扬枹[fú]兮拊[fǔ]鼓，疏缓节兮安歌；陈竽瑟兮浩倡；灵偃蹇[jiǎn]兮姣[jiāo]服，芳菲菲兮满堂；五音纷兮繁会，君欣欣兮乐康。浴兰汤兮沐芳，华采衣兮若英；灵连蜷兮既留，烂昭昭兮未央；謇[jiǎn]将憺[dàn]兮寿宫，与日月兮齐光；龙驾兮帝服，聊翱游兮周章；灵皇皇兮既降，猋[biāo]远举兮云中；览冀洲兮有余，横四海兮焉穷；思夫君兮太息，极劳心兮忡忡。吉日兮辰良，穆将愉兮上皇；抚长剑兮玉珥[ěr]，璆[qiú]锵鸣兮琳琅；瑶席兮玉瑱[zhèn]，盍[hé]将把兮琼芳；蕙肴蒸兮兰藉，奠桂酒兮椒浆；扬枹[fú]兮拊[fǔ]鼓，疏缓节兮安歌；陈竽瑟兮浩倡；灵偃蹇[jiǎn]兮姣[jiāo]服，芳菲菲兮满堂；五音纷兮繁会，君欣欣兮乐康。浴兰汤兮沐芳，华采衣兮若英；灵连蜷兮既留，烂昭昭兮未央；謇[jiǎn]将憺[dàn]兮寿宫，与日月兮齐光；龙驾兮帝服，聊翱游兮周章；灵皇皇兮既降，猋[biāo]远举兮云中；览冀洲兮有余，横四海兮焉穷；思夫君兮太息，极劳心兮忡忡。吉日兮辰良，穆将愉兮上皇；抚长剑兮玉珥[ěr]，璆[qiú]锵鸣兮琳琅；瑶席兮玉瑱[zhèn]，盍[hé]将把兮琼芳；蕙肴蒸兮兰藉，奠桂酒兮椒浆；扬枹[fú]兮拊[fǔ]鼓，疏缓节兮安歌；陈竽瑟兮浩倡；灵偃蹇[jiǎn]兮姣[jiāo]服，芳菲菲兮满堂；五音纷兮繁会，君欣欣兮乐康。浴兰汤兮沐芳，华采衣兮若英；灵连蜷兮既留，烂昭昭兮未央；謇[jiǎn]将憺[dàn]兮寿宫，与日月兮齐光；龙驾兮帝服，聊翱游兮周章；灵皇皇兮既降，猋[biāo]远举兮云中；览冀洲兮有余，横四海兮焉穷；思夫君兮太息，极劳心兮忡忡。吉日兮辰良，穆将愉兮上皇；抚长剑兮玉珥[ěr]，璆[qiú]锵鸣兮琳琅；瑶席兮玉瑱[zhèn]，盍[hé]将把兮琼芳；蕙肴蒸兮兰藉，奠桂酒兮椒浆；扬枹[fú]兮拊[fǔ]鼓，疏缓节兮安歌；陈竽瑟兮浩倡；灵偃蹇[jiǎn]兮姣[jiāo]服，芳菲菲兮满堂；五音纷兮繁会，君欣欣兮乐康。浴兰汤兮沐芳，华采衣兮若英；灵连蜷兮既留，烂昭昭兮未央；謇[jiǎn]将憺[dàn]兮寿宫，与日月兮齐光；龙驾兮帝服，聊翱游兮周章；灵皇皇兮既降，猋[biāo]远举兮云中；览冀洲兮有余，横四海兮焉穷；思夫君兮太息，极劳心兮忡忡。吉日兮辰良，穆将愉兮上皇；抚长剑兮玉珥[ěr]，璆[qiú]锵鸣兮琳琅；瑶席兮玉瑱[zhèn]，盍[hé]将把兮琼芳；蕙肴蒸兮兰藉，奠桂酒兮椒浆；扬枹[fú]兮拊[fǔ]鼓，疏缓节兮安歌；陈竽瑟兮浩倡；灵偃蹇[jiǎn]兮姣[jiāo]服，芳菲菲兮满堂；五音纷兮繁会，君欣欣兮乐康。浴兰汤兮沐芳，华采衣兮若英；灵连蜷兮既留，烂昭昭兮未央；謇[jiǎn]将憺[dàn]兮寿宫，与日月兮齐光；龙驾兮帝服，聊翱游兮周章；灵皇皇兮既降，猋[biāo]远举兮云中；览冀洲兮有余，横四海兮焉穷；思夫君兮太息，极劳心兮忡忡。</div>
		</div>
	</div>



	<script type="text/javascript" src="../js/jquery.js"></script>
    <script type="text/javascript">
		var wordlimit=function(){
			$(".block").each(function(){
				var copythis=$(this.cloneNode(true)).hide().css({
					'position':'absolute',
					'width':'auto',
					'overflow':'visible'
				});
				$(this).after(copythis);
				if(copythis.width()>$(this).width()){
					$(this).text($(this).text().substring(0,$(this).html().length-4));
					$(this).html($(this).html()+'...');
					copythis.remove();
					wordlimit();
				}
				else{
					copythis.remove();
					return;
				}
			});
		}
		wordlimit();
		
		
		window.onload = function(){
		    var text = document.getElementById("overflowhidden");
		    var str = text.innerHTML;
		    window.onresize = function(){
		        overflowhidden("overflowhidden",3,str);
		    }
		    overflowhidden("overflowhidden",3,str);
		}
		
		var overflowhidden = function(id, rows, str){
			
			
			
			
			
			
			
			
			
			// var $text = $('#overflowhidden');
			// var style = $text.height();
			// var lineHeight = style["line-height"];   //获取到line-height样式设置的值 必须要有
			
			
			
			var text = document.getElementById(id);
			var style = height(text);
			var lineHeight = style["line-height"];   //获取到line-height样式设置的值 必须要有
			var at = rows*parseInt(lineHeight);      //计算包含文本的div应该有的高度
			
			
			
			
			
			
			
			
			
			
			
			var tempstr = str;                       //获取到所有文本
			text.innerHTML = tempstr;                //将所有文本写入html中
			var len = tempstr.length;
			var i = 0;
			if(text.offsetHeight <= at){             //如果所有文本在写入html后文本没有溢出，那不需要做溢出处理
				/*text.innerHTML = tempstr;*/
			}
			else {                                   //否则 一个一个字符添加写入 不断判断写入后是否溢出
				var temp = "";
				text.innerHTML = temp;
				while(text.offsetHeight <= at){
					temp = tempstr.substring(0, i+1);
					i++;
					text.innerHTML = temp;
				}
				var slen = temp.length;
				tempstr = temp.substring(0, slen-1);
				len = tempstr.length
				text.innerHTML = tempstr.substring(0, len-3) +"...";     //替换string后面三个字符
				text.height = at +"px";                                  //修改文本高度 为了让CSS样式overflow：hidden生效
			}
		
		}
    </script>
    </body>
</html>